<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0">
            </el-col>
            <el-col :span="12" :xs="24">
                <div class="login_form">
                    <el-form :model="userInfo" :rules="rules" ref="loginFormRef">
                        <h1>Hello </h1>
                        <h2>你好 </h2>
                        <el-form-item prop="username">
                            <el-input prefix-icon="User" v-model="userInfo.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input prefix-icon="Lock" :type="show ==true ? 'password' : 'text'" :suffix-icon="!show  ? 'View': 'Hide'" v-model="userInfo.password">
                                <template #suffix>
                                    <i class="iconhide " @click="handleClick"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button :loading="loading" type="primary" @click="Clickbtn" class="login-btn"
                                size="default">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>

    </div>
</template>
<script setup>
import { getlogin, getuserinfo } from '@/utils/api.js'
import { setToken } from '@/utils/setToken.js'
import { ref, reactive } from 'vue'
import { getTime } from '@/utils/time.js'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
let { commit, state } = useStore();
let $router = useRouter()
let $route = useRoute()
let show = ref(true)
let menuRoutes = ref([])
const userInfo = reactive({
    username: 'admin',
    password: 'atguigu123',
})
let loading = ref(false)
const loginFormRef = ref()

const validatorUserName = (rule, value, callback) => {
    const nametern = /^[a-zA-Z0-9_-]{4,10}$/;
    console.log(nametern.test(value));
    if (nametern.test(value) === false) {
        callback(new Error('长度在 4 到 10 个字符'))
    } else {
        callback()
    }
}
const rules = {
    username: [
        // { required: true, message: '不能为空', trigger: 'blur' },
        // { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' },
        { trigger: 'blur', validator: validatorUserName },

    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
    ],
}
const handleClick = () => {
    show.value = !show.value
}
const Clickbtn = async () => {
    await loginFormRef.value.validate()
    loading.value = true
    try {
        // 通知仓库发登录请求
        getlogin(userInfo).then(res => {
            if (res.code == 200) {
                getTime()
                setToken('token', res.data)
                ElNotification({
                    message: '成功',
                    type: 'success',
                    title: `HI,${getTime()}`
                })
                getuserinfo().then(resinfo => {
                    let user = {
                        name: resinfo.data.name,
                        avatar: resinfo.data.avatar,
                        buttons: resinfo.data.buttons,
                        routes: resinfo.data.routes
                    }
                    // let userouter = filterAsyncRouter(asyncRoutes, resinfo.data.routes)
                    commit('qi_user/SETINFO', user)
                    // setToken('userinfo',JSON.stringify(user))
                    let redirect = $route.query.redirect
                    console.log(redirect);
                    $router.push({ path: redirect || '/' })
                })
            } else {
                loading.value = false
                ElMessage.error(res.message)
            }
        })
    } catch (error) {
        loading.value = false
        // 请求失败提示错误信息
        ElNotification({
            title: '登录失败',
            message: error.message || '未知错误',
            type: 'error',
            duration: 2000,
        })
    }

}
function filterAsyncRouter(asyncRoutes, routes) {
    console.log(asyncRoutes, routes);
    asyncRoutes.filter((item) => {
        if (routes.includes(item.name)) {
            if (item.children && item.children.length > 0) {
                filterAsyncRouter(item.children, routes)
            }
            return true
        }
    })
}

</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background-image: url('@/assets/image/background.jpg');
    background-size: 100% 100%;
    background-size: cover;
    position: relative;
    // display: flex;
}

.login_form {
    position: relative;
    top: 50vh;
    transform: translateY(-50%);
    width: 80%;
    background-color: #fff;
    padding: 20px;
    height: 300px;
    border-radius: 10px;
    h1{
        font-size: 30px;
        // color: #fff;
        // padding: 20px 0;
        padding-bottom: 20px;
    }
    h2{
        padding-bottom: 20px;
    }
}

.login-btn {
    width: 100%;
}

.iconhide {
    background-color: transparent;
    width: 50px;
    position: absolute;
    left: right;
    z-index: 99 !important;
    height: 100%;
}
</style>